<template>
	<view class="user-container">
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="bg">

			<view class="userinfo">
				<view class="avator">
					<image src="../../static/image/user.png" mode="widthFix"></image>
				</view>
				<view class="userphone" v-if="loginStatus">
					{{userPhone}}
				</view>
				<view class="login" @click="toLogin" v-else>
					登录
				</view>
			</view>

			<!-- 签到 -->
			<view class="sign">
				<image src="../../static/icon/v1/user_sing.jpg" mode="widthFix"></image>

				<view class="date">
					<view class="day">
						{{day}}
					</view>
					<view class="desc">
						<view class="title">
							签到领积分
						</view>
						<view class="tip">
							领积分兑换商品，百万好礼等你拿
						</view>
					</view>
					<view class="gosign">
						去签到
					</view>
				</view>

			</view>
		</view>
		<!-- 用户积分福源等 -->
		<view class="wealth">
			<view class="wealth-item">
				<view class="title">
					积分
				</view>
				<view class="count">
					0.00
				</view>
			</view>
			<view class="wealth-item">
				<view class="title">
					福源
				</view>
				<view class="count">
					0.00
				</view>
			</view>
			<view class="wealth-item">
				<view class="title">
					福晶
				</view>
				<view class="count">
					0.00
				</view>
			</view>
			<view class="wealth-item wealth-item-last">
				<view class="title">
					福钻
				</view>
				<view class="count">
					0.00
				</view>
			</view>
		</view>

		<!-- 完善资料 -->
		<view class="perfect" @click="perfect">
			完善资料
		</view>

		<!-- 我的余额我的积分 -->
		<view class="balance-list">
			<view class="balance-item">
				<view class="img">
					<image src="../../static/icon/xcx/user_wddd.png" mode="widthFix"></image>
				</view>
				<view class="title">
					我的余额
				</view>
			</view>
			<!-- 我的积分 -->
			<view class="balance-item">
				<view class="img">
					<image src="../../static/icon/xcx/user_wdzb.png" mode="widthFix"></image>
				</view>
				<view class="title">
					我的积分
				</view>
			</view>
			<!-- 我的福袋 -->
			<view class="balance-item">
				<view class="img">
					<image src="../../static/icon/xcx/mall_huangjin.png" mode="widthFix"></image>
				</view>
				<view class="title">
					我的福袋
				</view>
			</view>
			<!-- 我的红包 -->
			<view class="balance-item">
				<view class="img">
					<image src="../../static/icon/xcx/user_wdcj.png" mode="widthFix"></image>
				</view>
				<view class="title">
					我的红包
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-list">
			<!-- 全部 -->
			<view class="order-item" @click="goOrders(0)">
				<view class="order-img">
					<image src="../../static/icon/xcx/user_mall.png" mode="widthFix"></image>
				</view>
				<view class="order-title">
					全部
				</view>
			</view>
			<!-- 待付款 -->
			<view class="order-item" @click="goOrders(1)">
				<view class="order-img">
					<image src="../../static/icon/xcx/user_dfk.png" mode="widthFix"></image>
				</view>
				<view class="order-title">
					待付款
				</view>
			</view>
			<!-- 代发货 -->
			<view class="order-item" @click="goOrders(2)">
				<view class="order-img three">
					<image src="../../static/icon/xcx/user_dfh.png" mode="widthFix"></image>
				</view>
				<view class="order-title">
					待发货
				</view>
			</view>
			<!-- 待收货 -->
			<view class="order-item" @click="goOrders(3)">
				<view class="order-img">
					<image src="../../static/icon/xcx/user_yfh.png" mode="widthFix"></image>
				</view>
				<view class="order-title">
					待收货
				</view>
			</view>
			<!-- 已完成 -->
			<view class="order-item" @click="goOrders(4)">
				<view class="order-img five">
					<image src="../../static/icon/xcx/user_ywc.png" mode="widthFix"></image>
				</view>
				<view class="order-title">
					已完成
				</view>
			</view>
		</view>

		<!-- 公告 -->
		<view class="notice">
			<view class="desc">
				{{noticeInfo}}
			</view>
			<view class="watch" @click="moreNotice">
				查看公告
			</view>
		</view>

		<!-- 其他操作 -->
		<view class="user-option">
			<u-cell-group>
				<u-cell-item @click="cellHandle('公告通知')" title="公告通知" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}"></u-cell-item>
				<u-cell-item @click="cellHandle('我的订单')" title="我的订单" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}"></u-cell-item>
				<u-cell-item @click="cellHandle('话费充值订单')" title="话费充值订单" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}">
				</u-cell-item>
				<u-cell-item @click="cellHandle('分期订单')" title="分期订单" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}"></u-cell-item>
				<u-cell-item @click="cellHandle('账户设置')" title="账户设置" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}"></u-cell-item>
				<u-cell-item @click="cellHandle('修改密码')" title="修改密码" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}"></u-cell-item>
				<u-cell-item @click="cellHandle('申请注销账号')" title="申请注销账号" hover-class="cell-hover-class"
					:title-style="{'font-size': '12px'}">
				</u-cell-item>
				<u-cell-item class="last" title="软件版本" value="1.2.5" :arrow="false"
					:title-style="{'font-size': '12px'}">
				</u-cell-item>
			</u-cell-group>

		</view>


		<!-- 退出登录 -->
		<view class="logout" @click="logout">
			退出登录
		</view>
		<u-modal v-model="showNotice" :content="noticeInfo" :show-title="false" confirm-text="关闭" :content-style="{'font-szie': '28rpx','color': '#000','font-weight': '600'
		}" :confirm-style="{'color': '#888'}"></u-modal>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				day: '',
				phone: "",
				showNotice: false,
				loginStatus: false,
				noticeInfo: '' // 公告通知
			}
		},
		computed: {
			userPhone() {
				let phone = ''
				if (this.phone) {
					const arr = [3, 4, 5, 6]
					for (let i = 0; i < this.phone.length; i++) {
						if (arr.indexOf(i) > -1) {
							phone += "*"
						} else {
							phone += this.phone[i]
						}
					}
				}
				return phone
			}
		},
		created() {
			this.day = new Date().getDate()
			this.getUserInfo()
			this.userLoginStatus()
			this.requestNitice()
		},
		methods: {
			goOrders(status) {
				if (!this.loginStatus) {
					return uni.redirectTo({
						url: "/pages/login/login"
					})
				} else {
					uni.navigateTo({
						url: '/pages/orders/orders?status=' + status
					})
				}

			},
			// 获取用户信息
			getUserInfo() {
				request.globalRequest({
					url: "/api/member/user/info"
				}).then(res => {
					if (res.status == "login") {
						this.loginStatus = false
						uni.removeStorageSync("usertoken")
					} else {
						this.loginStatus = true
						this.phone = res.userPhone && res.userPhone
					}

				})
			},
			show(title, type, callback) {
				this.$refs.uToast.show({
					title,
					type,
					duration: 2000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			// 请求公告信息
			requestNitice() {
				request.globalRequest({
					url: "/api/notice/top"
				}).then(res => {
					this.noticeInfo = res.noticeInfo
				})
			},
			// 请求用户登录状态
			userLoginStatus() {
				request.globalRequest({
					url: "/api/public/member/login_status"
				}).then(res => {
					if (typeof res === "number") {
						this.loginStatus = true
					}
				})
			},
			// 点击cell选项
			cellHandle(text) {
				console.log(text);
				if (!this.loginStatus) {
					return uni.redirectTo({
						url: "/pages/login/login"
					})
				}
				switch (text) {
					case "公告通知":
						uni.navigateTo({
							url: '/pages/morenotice/morenotice'
						})
						break
					case "账户设置":
						uni.navigateTo({
							url: "/pages/perfect/perfect"
						})
						break
					case "申请注销账号":
						uni.navigateTo({
							url: '/pages/cancellation/cancellation'
						})
						break
					case "修改密码":
						uni.navigateTo({
							url: '/pages/updatepwd/updatepwd'
						})
						break
					case "我的订单":
						uni.navigateTo({
							url: "/pages/orders/orders?status=0"
						})
						break
					default:
						break

				}
			},
			// 前往登录页面
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			logout() {
				request.globalRequest({
					url: "/api/public/member/logout",
					method: "post"
				}).then(res => {
					console.log(res);
					if (res.status === '0') {
						this.show("操作成功", "success", () => {
							uni.removeStorageSync("usertoken")
							uni.redirectTo({
								url: "/pages/login/login"
							})
						})
					}
				})
			},
			// 完善资料
			perfect() {
				uni.navigateTo({
					url: "/pages/perfect/perfect"
				})
			},
			// 更多公告信息
			moreNotice() {
				this.showNotice = true
			}
		}


	}
</script>

<style lang="less" scoped>
	.user-container {
		padding: 0 10rpx 100rpx;

		image {
			width: 100%;
		}

		.bg {
			// height: 440rpx;
			padding: 0 20rpx 20rpx;
			position: relative;
			background-image: url('@/static/image/main.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding-top: 20rpx;

			.userinfo {
				display: flex;
				align-items: center;

				.avator {
					width: 120rpx;
					height: 120rpx;
					border-radius: 999rpx;
					overflow: hidden;

				}

				.userphone,
				.login {
					color: #fff;
					font-size: 32rpx;
					margin-left: 20rpx;
				}

				.login {
					font-weight: 700;
					font-size: 36rpx;
				}
			}

			.sign {
				width: 100%;
				margin-top: 40rpx;
				position: relative;

				image {
					border-radius: 30rpx;
				}

				.date {
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 100%;
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #fff;

					.gosign,
					.day {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.day {
						width: 80rpx;
						height: 80rpx;
						border-radius: 999rpx;
						background-color: rgba(0, 0, 0, .2);

					}

					.desc {
						font-size: 28rpx;

						.tip {
							font-size: 24rpx;
						}
					}

					.gosign {
						// height: 50rpx;
						background-color: rgba(0, 0, 0, .4);
						padding: 16rpx 40rpx;
						font-size: 24rpx;
						border-radius: 999rpx;
					}


				}
			}
		}

		.wealth {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff;
			transform: translateY(-10rpx);

			.wealth-item {
				flex: 1;
				text-align: center;
				border-right: 1px solid #e1e1e1;

				.title {
					color: #888;
					font-size: 24rpx;
				}

				.count {
					font-weight: 700;
					font-size: 28rpx;
					margin-top: 5rpx;
				}
			}

			.wealth-item-last {
				border: none;
			}
		}

		.perfect {
			color: #fff;
			font-size: 24rpx;
			padding: 16rpx 0;
			border-radius: 999rpx;
			text-align: center;
			background-color: #007AFF;
			margin-top: 10rpx;
		}

		.balance-list,
		.order-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.balance-item,
			.order-item {
				flex: 1;
				display: flex;
				min-height: 100rpx;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.img {
					width: 30%;
				}

				.order-img {
					width: 70rpx;
					height: 70rpx;
				}

				.three,
				.five {
					padding: 5rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.title,
				.order-title {
					margin-top: 5rpx;
					font-size: 24rpx;
					color: #333;
				}

			}
		}

		.notice {
			padding: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.desc {
				font-size: 24rpx;
				line-height: 48rpx;
				max-height: 100rpx;
				font-weight: 500;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				/*显示为......*/
				-webkit-line-clamp: 2;
				/*显示为两行，在第二行中显示为.......*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.watch {
				color: #888;
				font-size: 24rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}

		.user-option {
			padding: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.cell-hover-class {
			opacity: 0.5;
		}

		::v-deep .u-cell {
			padding: 10rpx 16rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.last {
			border-bottom: none;
		}

		.logout {
			background-color: #DD524D;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 999rpx;
			margin-top: 50rpx;
		}
	}
</style>
